<template>
  <!-- 内容主页面 -->
  <div class="out-main">
    <div class="main-top">
      <span class="logo">极端天气预测预警系统</span>
      <div class="top-right">
        <i class="el-icon-user-solid" style="color: white"></i>
        <span style="color: white">管理员</span>
        <span
          @click="goOut"
          style="margin-left: 10px; cursor: pointer; color: white"
          >退出登陆</span
        >
      </div>
    </div>
    <div class="main">
      <div class="main-left">
        <el-tabs
          type="border-card"
          tab-position="left"
          style="height: calc(100vh - 50px); border-top: none"
        >
          <!-- <el-tab-pane label="气候变化分析">
            <ul class="pageBox">
              <li>
                <span
                  :class="nowPath === '/heritage/industry' ? 'active' : ''"
                  @click="goPage('/heritage/industry')"
                  >范围气候变化</span
                >
              </li>
            </ul>
          </el-tab-pane> -->
          <el-tab-pane label="天气预测">
            <ul class="pageBox">
              <!-- <li>
                <span
                  :class="nowPath === '/MapCheLiang' ? 'active' : ''"
                  @click="goPage('/MapCheLiang')"
                  >广州市极端天气预警</span
                >
              </li> -->
              <li>
                <span
                  :class="nowPath === '/ThreeDaysW' ? 'active' : ''"
                  @click="goPage('/ThreeDaysW')"
                  >广州市极端天气预警</span
                >
              </li>
            </ul></el-tab-pane
          >
          <!-- <el-tab-pane label="角色管理">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> -->
        </el-tabs>
      </div>
      <div class="main-right">
        <div class="all-coverage">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      isCollapse: true,
      nowUser: "暂未获取用户数据",
      nowPath: "/heritage/industry",
    };
  },

  created() {
    this.nowUser = sessionStorage.getItem("username");
    console.log(this.nowUser);
  },

  computed: {
    ...mapState(["lang"]),
  },

  methods: {
    path1() {
      window.location.href = "https://wap.miit.gov.cn/";
    },

    path2() {
      window.location.href =
        "http://www.gov.cn/xinwen/2021-04/14/content_5599500.htm";
    },

    goOut() {
      sessionStorage.removeItem("username");
      this.$router.push("/heritage/login");
    },

    goPage(ele) {
      // document.querySelectorAll('')
      this.$router.push(ele);
      this.nowPath = this.$route.path;
    },
  },
};
</script>

<style>
.pageBox {
  list-style-type: none;
  padding: 0;
  font-size: 14px;
}
.pageBox li {
  margin: 15px 0;
}
.pageBox span {
  /* text-decoration: none; */
  color: #80878e;
  cursor: pointer;
}
.el-tabs__item:hover {
  color: #000 !important;
}
.el-tabs__item.is-active {
  color: #000 !important;
}
.pageBox span.active {
  color: #000;
}
/* 顶部样式start */

.main-top {
  background-color: #80878e;
  border: 1px solid transparent;

  border-color: #e7e7e7;
  z-index: 1000;
  border-width: 0 0 1px;
  /* margin-bottom: 15px; */
  line-height: 20px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
}

.main-top .logo {
  color: #fff;
  font-size: 18px;
}

.main-top .top-right {
  font-size: 16px;
  /* color: #337ab7; */
}
/* 顶部样式end */

.main {
  display: flex;
}
.main .main-left {
  width: 260px;
  overflow: hidden;
  height: calc(100vh - 52px);

  background-color: #90aacb;
}

.main .main-left > ul {
  width: 160px;
}
.main .main-left > .el-menu-vertical-demo > .el-menu-item,
.main .main-left > .el-menu-vertical-demo .el-submenu__title {
  font-size: 16px !important;
}
.main .main-right {
  width: calc(100% - 160px);
  /* background-color: red; */
  overflow: auto;
  height: calc(100vh - 52px);
  overflow: hidden;
}

.main .main-right .coverage-top {
  width: 100%;
  height: 7vh;
  /* border-bottom: #000; */
}

/* .main .main-right .all-coverage {
  
} */
.el-menu-vertical-demo {
  overflow: hidden;
}
::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
.myIcon {
  color: white;
}
.menuSpan {
  font-size: 15px;
  padding-left: 5px;
}
</style>
